import 'package:flutter/material.dart';

//Tabbar TabBarView实现类似头条顶部导航
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
          colorScheme: const ColorScheme(
              primary: Colors.blueAccent, //按钮字体颜色
              surfaceVariant: Colors.orange,
              secondary: Colors.yellowAccent,
              background: Colors.white, //整个页面背景色
              error: Colors.red,
              brightness: Brightness.light,
              onBackground: Colors.blueAccent, //边框按钮边框颜色
              outlineVariant: Colors.amber,
              onError: Colors.yellow,
              onPrimary: Colors.redAccent,
              onSecondary: Colors.blueAccent,
              onSurface: Color.fromARGB(255, 54, 54, 184),
              surface: Colors.blue) //整个标题栏颜色
          // primarySwatch: Colors.blue, // 设置主色调,无效，怎么设都是白色
          ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  //生命周期函数：当组件初始化的时候就会触发
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 9, vsync: this);
  }

  List<String> list = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red, //导航栏背景颜色
          leading: IconButton(
            //左侧按钮图标
            icon: const Icon(
              Icons.menu,
              color: Colors.white70,
            ),
            onPressed: () => {print("AppBar leading Iconbtn")},
          ),
          title: const Text(
            "Flutter P36",
            style: TextStyle(color: Colors.white),
          ),
          centerTitle: true,
          actions: [
            //右侧按钮图标
            IconButton(
              icon: const Icon(
                Icons.search,
                color: Colors.white70,
              ),
              onPressed: () => {print("AppBar actions search")},
            ),
            IconButton(
              icon: const Icon(
                Icons.more_horiz,
                color: Colors.white70,
              ),
              onPressed: () => {print("AppBar actions more_horiz")},
            )
          ],
          bottom: TabBar(
              controller: _tabController,
              indicatorColor: Colors.white,
              indicatorWeight: 3.0, //指示器高度
              indicatorPadding: const EdgeInsets.all(5),
              indicatorSize: TabBarIndicatorSize.tab,
              isScrollable: true,
              labelStyle: const TextStyle(fontSize: 14),
              unselectedLabelStyle: const TextStyle(fontSize: 10),
              labelColor: Colors.pink,
              unselectedLabelColor: Colors.white,
              indicator: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.elliptical(6, 9))),
              tabs: const [
                Tab(
                  child: Text("关注"), //, style: TextStyle(color: Colors.white)
                ),
                Tab(
                  child: Text("热门"), //, style: TextStyle(color: Colors.white)
                ),
                Tab(
                  child: Text("视频"), //, style: TextStyle(color: Colors.white)
                ),
                Tab(
                  child: Text("新闻"), //, style: TextStyle(color: Colors.white)
                ),
                Tab(
                  child: Text("游戏"), //, style: TextStyle(color: Colors.white)
                ),
                Tab(
                  child: Text("音乐"), //, style: TextStyle(color: Colors.white)
                ),
                Tab(
                  child: Text("购物"), //, style: TextStyle(color: Colors.white)
                ),
                Tab(
                  child: Text("购物8"), //, style: TextStyle(color: Colors.white)
                ),
                Tab(
                  child: Text("购物9"), //, style: TextStyle(color: Colors.white)
                ),
              ]),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            ListView(children: const [
              ListTile(title: Text("我是关注")),
              ListTile(title: Text("我是关注")),
              ListTile(title: Text("我是关注")),
            ]),
            ListView(children: const [
              ListTile(title: Text("我是热门")),
              ListTile(title: Text("我是热门")),
              ListTile(title: Text("我是热门")),
            ]),
            ListView(children: const [
              ListTile(title: Text("我是视频")),
              ListTile(title: Text("我是视频")),
              ListTile(title: Text("我是视频")),
            ]),
            const Text("news"),
            const Text("games"),
            const Text("music"),
            const Text("shopping"),
            const Text("shopping8"),
            const Text("shopping9"),
          ],
        ));
  }
}
